<template>
    <div>
        <el-form
                ref="dataForm"
                status-icon
                label-width="0px"
        >
            <el-descriptions :column="1" border>
                <el-descriptions-item labelStyle="width: 10%" contentStyle="width: 90%">
                    <template slot="label"> 上传文件</template>
                    <div>
                        <el-upload
                                class="upload-demo"
                                drag
                                :action="uploadUrl"
                                multiple
                                :on-success="uploadSuccess"
                                :on-progress="uploadProgress"
                                :headers="uploadHeader"
                                :on-error="uploadError"
                                :show-file-list="false"
                        >
                            <i class="el-icon-upload"></i>
                            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                            <div class="el-upload__tip" slot="tip">请先下载<a target="_blank" :href="templateUrl">导入模版</a>，只能上传excel文件，且不超过2M。
                            </div>
                        </el-upload>
                    </div>
                </el-descriptions-item>

                <el-descriptions-item labelStyle="width: 10%" contentStyle="width: 90%">
                    <el-form-item label=" ">
                        <el-button @click="handleDialogVisible(true)" size="small">取 消</el-button>
                    </el-form-item>
                </el-descriptions-item>
            </el-descriptions>
        </el-form>

    </div>
</template>

<script>
    import {getToken} from "@/common/token";

    export default {
        props: ["rowData", "dialogStatus"],
        components: {},
        data() {
            return {
                uploadUrl: process.env.VUE_APP_API + "/data/data/uploadUserImport",
                uploadHeader: {
                    Authorization: "Bearer " + getToken(),
                },
                templateUrl: process.env.VUE_APP_API + "/tpl/人员导入模版.xlsx",
                createLoading: false,
                updateLoading: false,
            };
        },
        created() {

        },
        methods: {
            uploadProgress: function () {
                this.loading = this.$loading({
                    lock: true,
                    text: '数据导入中，请耐心等待！',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
            },
            uploadSuccess: function (res) {
                if (res.code === 200) {
                    this.msgSuccess(res.msg);
                } else {
                    this.msgError(res.msg);
                }
                this.loading.close();
                this.handleDialogVisible(true);
            },
            uploadError: function () {
                this.msgError("后端错误，请联系管理员");
                this.loading.close();
                this.handleDialogVisible(false);
            },
            //父页面的回调事件
            handleDialogVisible(isUpdate) {
                this.dialogVisible = false;
                this.$emit("childByDialogVisible", this.dialogVisible, isUpdate);
            },
        },
        watch: {},
    };
</script>

<style lang="scss" scoped="scoped">
    .el-upload__tip {
        font-size: 15px;

        a {
            color: blue;
        }
    }
</style>
